<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange"
    :header-cell-style="headerCellStyle">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      v-for="item in tableHead"
      :label="item.label"
      :prop="item.porp"
      :key="item.label"
      :show-overflow-tooltip="tooltip">

      <template slot-scope="scope">
        <div class="button-row" v-if="item.type == 'button'">
          <!-- 按钮 -->
            <el-button v-if="item.button && item.button.update" @click="$emit('xiu',true,scope.row)" type="success">修改</el-button>
            <el-button v-if="item.button && item.button.delete" @click="$emit('shan',scope.row.id)" type="danger">删除</el-button>
        </div>
      
        <!-- 图片 -->
        <div class="img-row" v-if="item.type == 'img'">
          <el-image 
            v-if="item.isClick "
            style="width: 100px; height: 100px"
            :src="item.formatter ? item.formatter(scope.row[item.prop]) : scope.row[item.prop]" 
            :preview-src-list="scope.row[item.prop]">
          </el-image>
          <el-avatar
          v-else
          shape="square" :size="100" :fit="fit" 
          :src="item.formatter ? item.formatter(scope.row[item.prop]) : scope.row[item.prop]"
          >
          </el-avatar>
        </div>
        <div>
          <!-- 开关 1开启 0关闭 -->
          <el-switch
            v-if="item.type == 'switch'"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1" 
            inactive-value="0">
          </el-switch>
          <div class="text" v-else>
            {{scope.row[item.prop] }}
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
    tableData:{
      type:Array,
      defanlt:() => []
    },
    tableHead:{
      type:Array,
      defanlt:() => []
    },
    headerCellStyle:{
      type:Object,
      defanlt:() => {
        return{
          background: "red",
          fontSize:'18px',
        }
      }
    },
    tooltip:{
      type:Boolean,
      defanlt:true
    },
  },
  methods:{
    handleSelectionChange(val){
      this.$emit('handleSelectionChange',val)
    }
  }
}
</script>

<style scoped>

</style>